<template>
    <Menus >
        <template v-slot:routeF>
            首页
        </template>
        <template v-slot:routeS>
            首页看板
        </template>
        <div class="content-container">
            <div class="leader">
                <div v-for="it in customer" :key="it.icon" @click="getId(it)">
                    <div class="title">
                        <div >{{it.title}}</div>
                        <div class="eng">{{it.eng}}</div>
                    </div>
                    <div class="num">
                        <span>{{it.num}}</span>
                        <el-icon v-if="it.icon==='UserFilled'"><UserFilled /></el-icon>
                        <el-icon v-if="it.icon=='Document'" ><Document /></el-icon>
                        <el-icon v-if="it.icon=='Money'" ><Money /></el-icon>
                        <el-icon v-if="it.icon=='FolderChecked'" ><FolderChecked /></el-icon>
                        <el-icon v-if="it.icon=='Ship'" ><Ship /></el-icon>
                        <el-icon v-if="it.icon=='Opportunity'" ><Opportunity /></el-icon>
                    </div>
                </div>
            </div>
            <div class="parts">
               <div class="todo">
                    <span>待办事项 <span class="more">更多>></span></span>
                    <div class="tigs">
                        <div v-for="it in todoList" :key="it.task">
                            <div class="question">
                                <span >{{it.name}}</span>
                                <span class="last"><el-icon v-if="it.icon=='Help'"><Help/></el-icon>{{it.todo}}</span>
                            </div>
                            <div class="absolute">
                                <span>{{it.task}}......</span>
                                <span class="last">{{it.time}}</span>
                            </div>
                        </div>
                    </div>
               </div>
               <div class="shujuFenxi">
                    <span>销售数据分析 <span>{{ todays }}</span></span>
                    <div  ref="barChartNode" style="width: 100%; height: 80%"></div>
               </div>
               <div class="yeji">
                    <span>销售业绩排名(TOP10)<span>{{ todays }} </span></span>
                    <div class="danwei">
                        <span>单位: (万元)</span>
                         <div  ref="barChatYeji" style="width: 100%; height: 100%"></div>
                    </div>
                   
               </div>
               <div class="qushi">
                    <span>销售数据趋势<span>近1个月</span></span>
                    <div class="danwei">
                        <span>单位: (万元)</span>
                        <div  ref="barChartQushi" style="width: 100%; height: 100%" ></div>
                    </div>
                </div> 
               
            </div>
        </div>
    </Menus>
    <!-- <Dialog v-else @close="closeEvn" >

    </Dialog> -->
</template>
<script setup>
import { computed, onBeforeUnmount, onMounted,reactive,ref, watch,getCurrentInstance } from 'vue'
import echarts from 'echarts'
import ajax from '../../apis/ajax'
import { useRouter } from 'vue-router'
/* chart渲染方法 */
const barChartNode = ref(null)
const barChatYeji=ref(null)
const barChartQushi=ref(null)
// const config=ref("true")
const router=useRouter()
// today
let todays = ref('')

function getId(eve){
    if(eve.id=='q1'){
       router.push('/home/Dialog')
    }
    if(eve.id=='q2'){
         router.push('/home/newOrder')
    }
}
// function closeEvn(arg){
//     config.value=arg
//     console.log(config.value)
  
// }
const total = ref(0)

// 今日日期
     

function getList(currentDate) {
      ajax({
          url: '/customer/info/list',
          /* 如果是get请求，可以使用params对象来传递参数，他会自动进行url地址拼接 */
        //   method:'GET',
          params: {
            date: currentDate,
          }
      }).then(({data}) => {
        // console.log(data.data.total)
        console.log(data)
        total.value = data.data.total
      })
  }  

function getday(){
// 获取当前时间
        // const date = new Date().toLocaleDateString() 
        // console.log(date)
        const today = new Date();
        const year = today.getFullYear();//获取年份
        const month = today.getMonth() + 1;//获取月份
        const day = today.getDate();//获取日期
        if(month < 10){
            const month1 = '0' + month
            if(day < 10){
                const day1 = '0' + day
                const currentDate = year + "-" + month1 + "-" + day1
                todays = currentDate
                getList(currentDate)
            }else{
                const currentDate = year + "-" + month1 + "-" + day
                getList(currentDate)
            }
        }else{
            if(day < 10){
                const day1 = '0' + day
                const currentDate = year + "-" + month + "-" + day1
                todays = currentDate
                getList(currentDate)
            }else{
                const currentDate = year + "-" + month + "-" + day1
                getList(currentDate)
            }
        }
}


onMounted(
    function(){
        const chart1 = echarts.init(barChartNode.value)
        const chart2 = echarts.init(barChatYeji.value)
        const chart3 = echarts.init(barChartQushi.value)
        
        getday()
        
        
        // loopChart1(chart1)
        loopChart1(chart1)
        loopChart2(chart2)
         chart3.setOption({
                xAxis: {
                type: 'category',
                boundaryGap: false,
                data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月',"8月","9月","10月","11月",'12月']
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                    color:{
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{
                        offset: 0, color: '#c8fef8' // 0% 处的颜色
                    }, {
                        offset: 1, color: '#b9bffd' // 100% 处的颜色
                    }],
                    global: false },
                    data: [180, 200, 300, 500, 230, 420, 390,600,620,400,410,220],
                    type: 'line',
                    areaStyle: {}
                    }
                ]
            })
        
       
    }
    
) 
let timer=null
function loopChart2(chart){
    timer=setTimeout(function(){
        ajax({
            url:'/sale/info/list',
            method:'GET'
        }).then(({data})=>{
            chartRender2(chart,data.data)
        })
        loopChart2(chart)
    },3000)
}
function loopChart1(chart){
    timer=setTimeout(function(){
        ajax({
            url:'/saledata/info/list',
            method:'GET'
        }).then(({data})=>{
            chartRender1(chart,data.data)
        })
        loopChart1(chart)
    },1000)
}
onBeforeUnmount(function(){
    clearInterval(timer)
})

function chartRender2(chart,data){
     chart.setOption({
                tooltip: {
                trigger: 'axis',
                axisPointer: {
                type: 'shadow'
                }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: [
                    {
                    type: 'category',
                    data: data.map(it=>it.id),
                    axisTick: {
                        alignWithLabel: true
                    }
                    }
                ],
                yAxis: [
                    {
                    type: 'value'
                    }
                ],
                series: [
                    {
                    color:[ '#72abff'],
                    name: '销售金额',
                    type: 'bar',
                    barWidth: '20%',
                    data:data.map(it=>it.number)
                    }
                ]
                }
            )
}
function chartRender1(chart,data){
     chart.setOption({
                    tooltip: {
                        trigger: 'item'
                    },
                    legend: {
                        top: '20',
                        left: '300',
                        width:300,
                        height:500,
                        itemWidth: 20 ,
                        itemHeight:20,
                        itemGap: 60 ,
                    
                        
                    },
                    series: [
                        {
                        color:[ '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4'],
                        name: '',
                        type: 'pie',
                        right:300,
                        radius: ['40%', '70%'],
                        avoidLabelOverlap: false,
                        label: {
                            show: false,
                            position: 'left'
                        },
                        emphasis: {
                            label: {
                            show: false,
                            fontSize: 17,
                            fontWeight: 'bold'
                            }
                        },
                        labelLine: {
                            show: false
                        },
                        data: data
                        }
                    ]
                })
}

const customer=reactive([
        {title:'今日新增客户',eng:'NEW CUSTOMERS',num:total,icon:"UserFilled" ,id:'q1'},
        {title:'今日新增订单',eng:'NEW ORDER',num:40,icon:"Document" ,id:'q2'},
        {title:'今日新增回款',eng:'NEW COLLECTION',num:28,icon:"Money" ,id:'q3'},
        {title:'今日跟进记录',eng:'FOLLOW UP RECORD',num:88,icon:"FolderChecked" ,id:'4'},
        {title:'今日新增商机',eng:'BUSINESS OPPORTUNITY',num:5,icon:"Ship" ,id:'5'},
        {title:'今日新增线索',eng:'NEW CLUES',num:12,icon:"Opportunity" ,id:'6'}
]);

const todoList=reactive([
    {name:'【系统问题工单】',icon:'Help',todo:'待分配',task:'蓄势待发和我的骄傲.....',time:'2023-5-25'},
    {name:'【系统问题工单】',icon:'Help',todo:'待分配',task:'蓄势待发和我的骄傲.....',time:'2023-5-25'},
    {name:'【系统问题工单】',icon:'Help',todo:'待分配',task:'蓄势待发和我的骄傲.....',time:'2023-5-25'}
])

</script>
<style lang="less">
.content-container{
   width: 100%;
   height: 100%;
    >.leader{
        height: 130px;
        overflow: hidden;
        width: 100%;
        display: flex;
        background: #f2f5ff;
        >div{
            padding-left:20px ;
            width:200px;
            height:120px;
            background: #ffffff;
            margin: 0 20px;
            margin-top:5px;
            border-radius: 10px;
            >.title{
                height: 60px;
                font-size: 16px;
                color: #183fa6;
                 margin-top: 20px;
                >.eng{
                    font-size: 12px;
                    color: #e7e5e7;
                     margin-top: 10px;
                }
            }
            >.num{
                height: calc(100% - 60px);
                font-size: 29px;
                color:#7681f1 ;
                line-height: calc(100% - 60px);
                position: relative;
                >span{
                    margin-right: 60px;
                    display: inline-block;
                    line-height: calc(100% - 60px);
                    display: inline-block;
                    padding-top:20px ;
                }
                >.el-icon{
                       line-height: 40px;
                        position: absolute;
                        display: inline-block;
                        bottom:25px;
                        width:40px;
                        height:40px;
                        color: #ffffff;
                        background: #72abff;
                        text-align: center;
                        border-radius: 20px;
                }
                
            }
        }
    }
    >.parts{
        height: calc(100% - 130px);
        width:100%;
        background:#f2f5ff;
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
        overflow: hidden;
        .todo{
            width: 50%;
            height: 50%;
            >.tigs{
                width:100%;
                height: calc(100% - 50px);
                >div{
                    width: 90%;
                    margin-left: 20px;
                    padding-top: 15px;
                    height: 33%;
                    position: relative;
                    border-bottom:2px dashed #c0c4c9;

                    .last{
                        position: absolute;
                        right: 0px;
                    }
                    >.question{
                        font-size: 16px;
                        color: #273566;
                    }
                    >.absolute{
                        font-size: 12px;
                        color: #c0c4c9;
                        margin-left: 10px;
                    }
                }
            }
            >span>.more{
            background: transparent;
            color: #a4abb7;
            height: 20px;
            top:10px;
            left: 460px;
          
            font-size: 18px;
        }
        }
        
        >div{
            display: flex;
            flex-wrap: wrap;
            width: 50%;
            height: 50%;
            flex-direction: row;
            .danwei{
                position: relative;
                width: 100%;
                height: 80%;
                >span{
                    position: absolute;
                    top:20px;
                    height: 20px;
                    color: #3a4e7f;
                    font-size: 16px;
                    left: 25px;
                }
            }
            // background: #c2b3b3;
            >span{
                height: 40px;
                width: 100%;
                padding-top:14px;
                margin-left: 20px;
                font-size: 20px;
                color: #345d9f;
                position: relative;
                >span{
                    width:120px;
                    left: 450px;
                    top:10px;
                    height: 30px;
                    line-height: 30px;
                    border-radius: 10px;
                    text-align: center;
                    background: #fff;
                    position: absolute;
                    
                }
                // background: palegoldenrod;
            }
            >div{
                width: calc(100% - 30px);
                background: #ffffff;
                height: 200px;
                border-radius: 20px;
                flex-direction: column-reverse;
                margin:0 20px;
            }
        }
    }
}
</style>
